import React, { useState, useEffect } from 'react';
import './style.css'
import axios from '../../../api/api'
import Video from '../Video'
import Header from '../../../component/wh_component/Video_Head'
import { InfiniteScroll } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
export default function Index() {
  const [videos_list, setVideos_list] = useState([])
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true);
  async function loadMore() {
    const append = await get_video();
    setVideos_list(val => [...val, ...append]);
    setHasMore(append.length > 0);
  }

  const get_video = async () => {
    await sleep(300)
    setPage(page => page + 1)
    let { data: { code, list } } = await axios.get('/wh_index/get_video?page=' + page)
    return list
  }

  return (
    <div className='wh_home'>
      <Header />
      <div className="app_videos">
        {
          videos_list.map((item, index) => {
            return <Video key={item._id} videos={item.video_url}
              user={item.tid.username}
              description="如果所有人都去种好看的玫瑰，那么谁来守护家乡的和平的稻穗"
              song="创作的原声"
              hearts={item.liked}
              comments="10.7万"
              collects={item.shoucang}
              share={item.share}
              users={item.tid.src}
              cd={item.tid.src}
              id={item._id}
            />
          })
        }
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
    </div>
  )
}